<template>
  <div>
    <div class="btn-choose-activity-box">
      <a class="btn-choose-activity" v-if="giftChooseNum !== 0" @click="openGiftList">选择活动赠品</a>
      <span class="gift-notice">
        (若未选择活动赠品，则随机赠送)
      </span>
    </div>
    
    <div class="gift-lists">
      <ul>
        <li class="gift-list-item" v-for="(item, index) in chooseGiftList" :key="index">
          <span class="name">[{{item.brandName}}]{{item.standard}}<em v-show="item.other">—{{item.other}}</em> </span>
          <span class="num">x{{item.num}}</span>
          <a class="el-icon-circle-close gift-list-close" @click="deleteGift(item.id)"></a>
        </li>
      </ul>
    </div>
    <!--选择赠品弹框 v-model="skuItem.number"  @change="changeProNum($event, cartIndex,skuIndex, skuItem.id)"-->
    <div class="el-dialog__wrapper" style="z-index: 2011;" title="赠品列表" v-if="giftPopVisi" width="450px" >
      <div class="gift-dialog">
        <div class="gift-dialog_header">
          <span class="title">赠品列表</span>
          <span class="gift-pop-notice">当前最多可选<em class="color-org2">{{giftChooseNum}}</em>件赠品</span>
          <span class="el-icon-close close" @click="giftPopVisi = false"></span>
        </div>
        <div class="gift-dialog_body" v-if="currentGiftList.length > 0">
          <div v-for="(item, index) in currentGiftList" :key="index" class="gift-line">
            <span class="gift_name">[{{item.brandName}}]{{item.standard}}<em v-show="item.other">—{{item.other}}</em></span>
            <span class="gift_amount">
              <input type="number" class="gift-input-number" v-model.number="item.num" min="0"  v-on:input="changeGiftNum(item.num, index)" />
            </span>
          </div>
          <div class="choose-gift-box" >
            <a class="gift-choose-btn" @click="sureGiftList">确定选择</a>
          </div>
        </div>
      </div>
    </div>
    <!-- mask -->
    <div class="v-modal" tabindex="0" v-if="giftPopVisi" style="z-index: 2006;"></div>
    </div>
</template>

<script>
export default {
  name: 'giftList',
  props: {
    giftList: {
      type: [Array, Object]
    },
    giftChooseNum: {
      type: Number
    },
    activityId: {
      type: Number
    }
  },
  data () {
    return {
      giftPopVisi: false,
      currentGiftList: [],
      showGiftList: []
    }
  },
  computed: {
    // 赠品选择列表
    chooseGiftList () {
      let _arr = []
      if (this.showGiftList && this.showGiftList.length > 0) {
        this.showGiftList.map((item, index) => {
          if (parseInt(item.num) > 0) {
            item['activityId'] = this.activityId
            _arr.push(item)
          }
        })
      }
      return _arr
    }
  },
  methods: {
    _initData () {
      this.showGiftList = JSON.parse(JSON.stringify(this.giftList))
      this.currentGiftList = JSON.parse(JSON.stringify(this.giftList))
    },
    // 确定选择赠品活动
    sureGiftList () {
      this.showGiftList = this.currentGiftList
      this.giftPopVisi = false
      // 选中的赠品列表
      this.$emit('selectedGiftFun', this.chooseGiftList)
    },
    // 选择活动赠品
    openGiftList () {
      // 合并选中赠品的数据和所有的赠品数组
      let arr1 = this.currentGiftList
      let arr2 = this.showGiftList
      for (let j = 0; j < arr1.length; j++) {
        for (let i = 0; i < arr2.length; i++) {
          if (arr1[j]['id'] === arr2[i]['id']) {
            arr1[j] = arr2[i]
          }
        }
      }
      this.currentGiftList = JSON.parse(JSON.stringify(arr1))
      this.giftPopVisi = true
    },
    // 选择赠品数量
    changeGiftNum (value, index) {
      let Pvalue = parseInt(value) || 0
      let otherNum = 0
      // get other gift's number
      this.currentGiftList.map((item, ind) => {
        if (index !== ind) {
          otherNum += parseInt(item.num)
        }
      })
      let currtgift
      let leftNum = this.giftChooseNum - otherNum
      let waitVal = otherNum + Pvalue >= this.giftChooseNum ? leftNum : Pvalue
      this.currentGiftList.map((gift, ind) => {
        if (index === ind) {
          currtgift = gift
          currtgift.num = parseInt(waitVal)
          this.$set(this.currentGiftList, ind, currtgift)
        }
      })
    },
    // 删除选中的赠品商品
    deleteGift (id) {
      let currtgift
      if (this.showGiftList && this.showGiftList.length > 0) {
        this.showGiftList.map((item, ind) => {
          if (item.id === id) {
            currtgift = item
            currtgift.num = 0
            this.$set(this.showGiftList, ind, currtgift)
          }
        })
        // 选中的赠品列表
        this.$emit('selectedGiftFun', this.chooseGiftList)
      }
    }
  },
  mounted () {
    this._initData()
  },
  watch: {
    // giftList
    giftList (newval) {
      this._initData()
    }
  }

}
</script>

<style lang="scss" scoped>
.color-org2{
  color: #F55923;
}
// 赠品
  .gift-notice{
    font-size: 14px;
    color: #999;
  }
  .gift_amount{
    float: right;
  }
  .gift-line{
    padding: 16px 0;
    overflow: hidden;
    border-bottom: 1px solid #ececec;
  }
  .choose-gift-box{
    text-align: center;
    .gift-choose-btn{
      display: inline-block;
      color: #fff;
      background-color: #FFCC00;
      border-color: #FFCC00;
      padding: 14.5px 0;
      font-size: 14px;
      border-radius: 2px;
      margin: 16px 0;
      width: 164px;
    }
  }
  .btn-choose-activity-box{
    font-size: 0;
  }
  .btn-choose-activity{
    display:inline-block;
    color: #555555;
    padding: 12px 25px;
    background-color: #ffcc00;
    border-radius: 2px;
    margin-right: 25px;
    font-size: 14px;
  }
  .gift-lists{
    margin-top: 10px;
    padding-bottom: 20px;
    padding-right: 305px;
    .gift-list-item{
      display: inline-block;
      border-radius: 4px;
      border: solid 1px #dcdcdc;
      padding: 12px 10px 10px 10px;
      color: #555555;
      font-size: 0;
      line-height: 1;
      margin-right: 20px;
      margin-bottom: 10px;
      margin-top: 10px;
      .name{
        font-size: 16px;
      }
      .num{
        color: #f45923;
        margin-left: 14px;
        font-size: 14px;
      }
      .gift-list-close{
        color: rgba(0, 0, 0, 0.3);
        margin-left: 20px;
        font-size: 16px;
        cursor: pointer;
        &:hover{
          color: rgba(0, 0, 0, 0.4);
        }
      }
    }
  }
  .gift-dialog{
    position: relative;
    width: 600px;
    margin: 20vh auto 50px;
    background: #fff;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .gift-dialog_header{
      background: #f7f7f7;
      padding:20px;
      .title{
        // line-height: 24px;
        font-size: 18px;
        color: #666666;
        vertical-align: top;
      }
      .close{
        position: absolute;
        top: 22px;
        right: 15px;
        padding: 0;
        color: #878d99;
        cursor: pointer;
        font-size: 16px;
      }
      .gift-pop-notice{
        color: #b3b3b3;
        font-size: 14px;
        letter-spacing: 0.03rem;
        vertical-align: middle;
      }
    }
    .gift-dialog_body{
      padding: 0 40px;
      color: #555555;
      .gift_name{
        height: 30px;
        line-height: 30px;
        display: inline-block;
      }
    }
  .gift-input-number{
    border: 1px solid #e1e4eb;
    border-radius: 2px;
    padding: 5.5px 0 5.5px 8px;
    width: 50px;
    color: #555555;
    padding-right: 5px;
    text-align: right;
  }
</style>
